<template>
  <div class="table-view">
      <!-- 按钮区域 -->
      <el-row
        type="flex"
        class="row-bg button-tab"
        justify="space-between">
        <el-row>
          <el-button
            type="primary"
            @click="addUserInfo">
            添加用户
          </el-button>

          <el-button
            type="primary"
            @click="deleteUserInfo">
            删除用户
          </el-button>

          <el-button
            @click="importExcel"
            type="primary">
            导入Excel
          </el-button>

          <el-button
            type="primary">
            导出Excel
          </el-button>
        </el-row>
        <el-input
          v-model="input"
          suffix-icon="el-icon-search"
          placeholder="请输入内容"
          class="search-input">
        </el-input>
    </el-row>

    <!-- 表单区域 -->
      <el-table
        style="width: 100%"
        height="580px"
        :data="pop.tableData"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>

      <!-- 姓名 -->
        <el-table-column
          prop="date"
          label="姓名"
          width="180">
        </el-table-column>

        <!-- 组织 -->
        <el-table-column
          prop="name"
          label="组织"
          width="180">
        </el-table-column>

        <!-- 学号/工号 -->
        <el-table-column
          prop="address"
          label="学号/工号">
        </el-table-column>

        <!-- 用户名 -->
        <el-table-column
          prop="address"
          label="用户名">
        </el-table-column>

        <!-- 操作 -->
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button
              @click="handleClick(scope.$index)"
              type="text" size="medium"
              style="font-weight: 400">
              删除
            </el-button>
            <span class="line">|</span>
            <el-button
              @click="modifyClick"
              type="text" size="medium"
              style="font-weight: 400">
              修改
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 添加用户 -->
      <el-dialog
        title="添加用户"
        :visible.sync="dialogVisible"
        width="50%">
        <add-user v-if="dialogVisible"/>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 文件上传 -->
       <el-dialog
        title="导入Excel"
        :visible.sync="uploadExcelVisible"
        width="60%">
        <file-upload/>
        <span slot="footer" class="dialog-footer">
          <el-button @click="uploadExcelVisible = false">取 消</el-button>
          <el-button type="primary" @click="uploadExcelVisible = false">确 定</el-button>
        </span>
      </el-dialog>

  </div>
</template>
<script>
import AddUser from 'views/system/child/AddUser'
export default {
  name: 'TableView',
  props: {
    data: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      pop: {
        tableData: this.data,
      },
      input: '',
      uploadExcelVisible: false, // 导入文件
      dialogVisible: false, // 子组件载体
      multipleSelection: [], // 复选框
    }
  },
  components: {
    AddUser,
  },
  methods: {
    importExcel() {
      this.uploadExcelVisible = true
    },
    modifyClick( index ) {
      /* 修改 */
      this.dialogVisible = true
      console.log(index)
    },
    handleSelectionChange(val) {
      /* 复选框 */
      this.multipleSelection = val
    },
    addUserInfo() {
      /* 添加用户 */
      this.dialogVisible = true
    },
    deleteUserInfo() {
      /* 删除用户 */
      this.multipleSelection.length <1
        ?
        this.$notify({
          title: '警告',
          message: '请勾选对应条目再进行删除！',
          type: 'warning',
        })
        :
        this.$notify({
          title: '成功',
          message: '删除成功！',
          type: 'success',
        })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(() =>{
          done()
        })
        .catch( () => {})
    },
  },
}
</script>
<style lang="scss" scoped>
@import '~styles/default/table_view';
</style>